<template>
  <view class="global-m login">
    <!-- #ifndef  H5 -->
    <view style="height: 54px;"></view>
    <!-- #endif -->
    <view class="login-back">
      <image style="height: 16px;" mode="heightFix" src="/static/assets/images/back.png" @click="handleClickLeft" />
    </view>
    <wd-gap height="3rem"></wd-gap>
    <view class="d-flex-center">
      <image style="height: 60px" mode="heightFix" src="/static/72.png"></image>
      <!-- <image style="height: 30px" mode="heightFix" src="/static/assets/images/logo-t.png"></image> -->
      <view style="margin-left: 10px; font-size: 1.6rem;">壁纸酷酷</view>
    </view>
    <view class="d-flex-center">
      <view style="width: 280px;">
        <wd-divider color="#222">感到快乐的每一天都值得记录</wd-divider>
      </view>
    </view>
    <wd-gap height="4rem"></wd-gap>
    <view class="login-input-wrap">
      <wd-input v-model="username" :no-border="true" custom-class="login-input" size="large" placeholder="请输入手机号码"></wd-input>
    </view>
    <view class="login-input-wrap" style="margin-top: 1rem;">
      <wd-input :maxlength="4" v-model="vercode" :no-border="true" custom-class="login-input" size="large" placeholder="验证码">
        <template #suffix>
          <view v-show="verState" style="margin-top: 6px;">
            <wd-button @click="getVercode" type="warning" custom-class="login-button" size="large">
              发送验证码
            </wd-button>
          </view>
          <view v-show="!verState">
            <wd-count-down @finish="onFinish" ref="countDown" :auto-start="false" format="ss" :time="time" />
          </view>
        </template>
      </wd-input>
    </view>
    <!-- <view class="login-agree">
      <wd-checkbox checked-color="rgba(35, 156, 247, 1)" size="large" v-model="radio"></wd-checkbox>
      <view class="login-agree_text">
        已阅读并同意
        <view style="color: rgba(35, 156, 247, 1)">《用户服务及隐私协议》</view>
      </view>
    </view> -->
    <view class="login-btn">
      <wd-button @click="toLogin" custom-class="submit-btn" block size="large">
        登 录
      </wd-button>
    </view>
    <wd-gap height="1rem"></wd-gap>
    <view class="login-btn" style="width: 320px; margin: 0 auto;">
      <view class="login-tip">
        <wd-checkbox  v-model="radio"></wd-checkbox>
        <view class="describe">
          登录即同意<text style="color: #222;">《中国移动认证服务条款》</text>和<text style="color: #222;">《用户协议》</text>、<text style="color: #222;">《隐私政策》</text>并使用本机号码
        </view>
      </view>
    </view>
  </view>
  
</template>

<script setup>
import { ref } from 'vue'
import validator from 'validator'
import { toRouter, toSwich, showToast, showToastLoading, closeToast } from '@/hooks/utils'
import store from '../../store'
const verState = ref(true), time = ref(60*1000)
const vercode = ref(null), username = ref(uni.getStorageSync('wpa_username'))
const radio = ref( false ), countDown = ref(null)
const toLogin = () => {
	const isPhone = validator.isMobilePhone(username.value, 'zh-CN');
	if(!isPhone) return showToast('手机号码格式错误');
	if(!vercode.value) return showToast('请输入验证码')
	if(!radio.value){
		return uni.showModal({
			title: '提示',
			content: '尊敬的用户，您需要详细阅读并勾选下方《中国移动认证服务条款》、《用户协议》和《隐私政策》才可进入哦。',
			showCancel: false
		});
	}
	showToastLoading()
	uni.request({
		url:'/api/wallpaper/user/login',
		method: 'POST',
		data: {
			app: "wp",
			username: username.value,
			code: vercode.value
		}
	}).then(res=>{
		closeToast()
		uni.setStorageSync('wpa_username',username.value)
		store.getUserInfo()
		toSwich('/pages/index/index')
	})
  // toSwich('/pages/index/index');
}
const getVercode = () => {
  const isPhone = validator.isMobilePhone(username.value, 'zh-CN');
  if(!isPhone) return showToast('手机号码格式错误');
  showToastLoading()
  
  uni.request({
  	url: '/api/wallpaper/user/sms',
	method: 'POST',
	data: {
		app: "wp",
		username: username.value
	}
  }).then(res=>{
	  showToast('验证码发送成功');
	  verState.value = false;
	  countDown.value.start()
  })
}
const onFinish = () => {
  verState.value = true
  countDown.value.reset()
}
const handleClickLeft = () => {
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
page{
  height: 100vh;
}
.login{
  background: url('http://124.223.41.167:8080/mobile/static/images/bg.png') no-repeat;
  background-size: 100% 500px;
  --wot-button-primary-bg-color: rgba(35, 156, 247, 1);
  --wot-button-warning-bg-color: rgba(236, 245, 254, 1);
  --wot-button-warning-color: rgba(35, 156, 247, 1);
  --wot-input-bg: #f9f9f9;
}
.login-btn{
  --wot-button-medium-height: 2.6rem;
  --wot-button-primary-bg-color: rgb(220, 63, 100);
}
.login-tip{
  display: flex;
  margin-top: 0.9rem;
  .describe{
    flex: 1;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #888;
  }
}
.login-button{
  height: 2.2rem !important;
  padding: 0 0.8rem !important;
}
.login-agree{
  display: flex;
  margin-top: 1rem;
  align-items: center;
}
.login-agree_text{
  color: rgba(153, 153, 153, 1);
  font-size: 0.8rem;
  display: flex;
}
.login-btn{
  margin-top: 2.4rem;
}
.submit-btn{
  height: 3rem !important;
  font-size: 1.2rem !important;
}
</style>